@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

// Styling for cmk_tabs.js
div.cmk_tab {
  nav.main-navigation {
    overflow: hidden;

    a {
      display: inline-block;
      font-size: 1rem;
      text-align: center;
      text-decoration: none;
    }

    ul {
      padding: 0;
      list-style: none;
    }

    li {
      position: relative;
      float: left;
      min-width: 10rem;
      font-weight: $font-weight-bold;
      line-height: 2rem;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: border-bottom 0.5s;

      &:hover {
        background-color: $table-highlight-color;
      }
    }

    li.active {
      z-index: 10;
      border-bottom: 2px solid $success;
    }
  }

  div.main-content {
    position: relative;
    z-index: 20;
    height: 100%;
    min-height: 2.5rem;
    padding: 0.4rem 0.3rem;
    margin: 0;
    border: 1px solid $color-table-border;
    border-radius: 5;

    .cmk_tab_element {
      display: none;
    }

    .cmk_tab_element.active {
      display: unset;
    }
  }
}

.bar_chart,
.barplot {
  a {
    outline: none;
  }

  rect.bar.bar_chart,
  rect.bar {
    fill: $bar-fill-color;
    stroke: rgba($black, 0.2);

    &:hover {
      fill: $bar-hover-fill-color;
      stroke: $black;
    }
  }

  rect.bar.bar_chart.barbar_chart {
    fill: $barbar-fill-color;
    stroke: rgba($black, 0.3);

    &:hover {
      fill: $barbar-hover-fill-color;
      stroke: $black;
    }
  }
}

div.cmk_figure {
  div.loading_img_icon {
    background-image: url("images/load_graph.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 24px 24px;
  }

  div.loading_img {
    position: relative;
    left: 50%;
    width: 48px;
    height: 100%;
    background-image: url("images/load_graph.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
  }

  div.tooltip {
    position: absolute;
    z-index: 1;
    padding: 10px;
    color: $font-color;
    pointer-events: none;
    background-color: $graph-hover-popup-bg-color;
    border: $graph-hover-popup-border;
    box-shadow: $graph-hover-popup-box-shadow;
    border-radius: 5px;

    div.loading_img {
      left: 0;
      width: 24px;
      height: 24px;
    }
  }

  div.legend {
    position: absolute;
    top: 5px;
    right: 6px;
    padding: 5px;
    background-color: rgba($bg-color-secondary, 0.87);
    border-radius: 5px;

    div.legend_item {
      display: flex;

      div.color_code {
        width: 6px;
        height: 6px;
        margin-right: 4px;
        margin-top: 6px;
        border-radius: 2px;
      }
    }
  }

  g.axis {
    color: transparent; // graph axis edges are invisible
  }

  &.average_scatterplot {
    div.tooltip {
      max-width: 300px;
      min-width: 11px;
      min-height: 10px;
      overflow: hidden;

      table {
        border-collapse: collapse;

        tr {
          max-width: 450px;
          min-width: 450px;
        }

        td {
          padding: 2px;
        }

        tr:first-child td {
          max-width: 250px;
          min-width: 250px;
          text-align: left;
        }

        td:first-child {
          padding-right: 12px;
        }

        tr:nth-child(2) {
          max-width: 50px;
          min-width: 50px;
          padding-right: 12px;
        }

        tr.mean + tr.median {
          td {
            padding-bottom: 4px;
          }

          + tr td {
            padding-top: 4px;
            padding-bottom: 4px;
          }
        }

        tr.scatterpoint + tr,
        tr.median + tr {
          border-top: 1px solid $font-color;

          td {
            padding-top: 4px;
          }
        }

        tr.top_matches td:nth-child(2) {
          color: $font-color-red;
        }

        tr.bottom_matches td:nth-child(2) {
          color: $font-color-green;
        }
      }

      div.collapser {
        position: absolute;
        top: 4px;
        right: 6px;
        width: 12px;
        height: 12px;
        pointer-events: auto;

        img {
          height: 12px;
          transform: rotate(90deg);
        }

        &.active {
          img {
            transform: rotate(180deg);
          }

          + table tr:not(.scatterpoint):not(.date) {
            display: none;
          }
        }
      }
    }

    path.line {
      stroke-width: 2px;
    }

    path.pin {
      stroke: $font-color;
    }

    path.host.hilite {
      stroke: $scatterplot-hilite-color;
    }

    circle.scatterdot {
      fill: $dc-graph-color-0;

      &.hilite {
        fill: $scatterdot-hilite-color;
      }
    }
  }

  g.title rect {
    fill: $dashlet-body-bg-color;

    &.highlighted {
      fill: $headline-color;
    }
  }
}

circle.scatterdot {
  fill: $dc-graph-color-0;
}
